<!DOCTYPE html>
<html>
	<head>
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1"> -->
		<meta charset="utf-8" />
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
		<title></title>
	</head>
	<body>

		<div class="wrap" id="app"><!-- 使用名字为app的Vue -->
			<div class="wrap-head">
				<i class="fa fa-map-marker"></i>
				<h3>沈阳城市规划大厦</h3>
				<i class="fa fa-caret-down"></i>
			</div>
			<div class="wrap-serach">
				<div class="wrap-serach-text">
					<i class="fa fa-search"></i>
					搜索商家、商品名称
				</div>
			</div>
			<ul class="wrap-foodType">
														  <!-- gotoList是一个方法名字 -->
				<li v-for="item in info.businessTypes" @click="gotoList(item.id)"><!-- @click可以访问到Vue的东西 -->
					<img v-bind:src="item.img" />
					<p>{{item.name}}</p>
				</li>

			</ul>
			<div class="wrap-banner">
				<h3>品质套餐</h3>
				<h5>搭配齐全吃得好</h5>
				<p>立即抢购 ></p>
			</div>
			<div class="wrap-superMember">
				<div class="wrap-superMember-left">
					<img src="img/super_member.png" />
					<h3>超级会员 ●</h3>
					<p>每月享受超值权益</p>
				</div>
				<p class="wrap-superMember-right">立即开通 ></p>
			</div>
			<div class="wrap-recommend">
				<div class=wrap-recommend-leftLine></div>
				<h3>商家推荐</h3>
				<div class=wrap-recommend-rightLine></div>
			</div>
			<ul class="wrap-sortType">
				<li>综合排序<i class="fa fa-caret-down"></i></li>
				<li>最近距离</li>
				<li>销量最高</li>
				<li>筛选<i class="fa fa-caret-down"></i></li>
			</ul>
			<ul class="wrap-foodList">
				<li>
					<div class="wrap-foodList-foodInfo-img">
						<img src="img/sj01.png" />
					</div>

					<div class="wrap-foodList-foodInfo">
						<div class="wrap-foodList-foodInfo-head">
							<p>万家饺子（软件园店）</p>
							<i class="fa fa-mobile"></i>
						</div>
						<div class="wrap-foodList-foodInfo-star">
							<div class="wrap-foodList-foodInfo-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<span>4.9</span>
								<span>月售345单</span>
							</div>
							<div class="wrap-foodList-foodInfo-star-right">
								蜂窝专送
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-diliver">
							<div class="wrap-foodList-foodInfo-diliver-left">
								¥15起送 | ¥3配送
							</div>
							<div class="wrap-foodList-foodInfo-diliver-right">
								3.22km | 30分钟
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</li>
				<li>
					<div class="wrap-foodList-foodInfo-img">
						<img src="img/sj01.png" />
					</div>

					<div class="wrap-foodList-foodInfo">
						<div class="wrap-foodList-foodInfo-head">
							<p>万家饺子（软件园店）</p>
							<i class="fa fa-mobile"></i>
						</div>
						<div class="wrap-foodList-foodInfo-star">
							<div class="wrap-foodList-foodInfo-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<span>4.9</span>
								<span>月售345单</span>
							</div>
							<div class="wrap-foodList-foodInfo-star-right">
								蜂窝专送
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-diliver">
							<div class="wrap-foodList-foodInfo-diliver-left">
								¥15起送 | ¥3配送
							</div>
							<div class="wrap-foodList-foodInfo-diliver-right">
								3.22km | 30分钟
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</li>
				<li>
					<div class="wrap-foodList-foodInfo-img">
						<img src="img/sj01.png" />
					</div>

					<div class="wrap-foodList-foodInfo">
						<div class="wrap-foodList-foodInfo-head">
							<p>万家饺子（软件园店）</p>
							<i class="fa fa-mobile"></i>
						</div>
						<div class="wrap-foodList-foodInfo-star">
							<div class="wrap-foodList-foodInfo-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<span>4.9</span>
								<span>月售345单</span>
							</div>
							<div class="wrap-foodList-foodInfo-star-right">
								蜂窝专送
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-diliver">
							<div class="wrap-foodList-foodInfo-diliver-left">
								¥15起送 | ¥3配送
							</div>
							<div class="wrap-foodList-foodInfo-diliver-right">
								3.22km | 30分钟
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</li>
				<li>
					<div class="wrap-foodList-foodInfo-img">
						<img src="img/sj01.png" />
					</div>

					<div class="wrap-foodList-foodInfo">
						<div class="wrap-foodList-foodInfo-head">
							<p>万家饺子（软件园店）</p>
							<i class="fa fa-mobile"></i>
						</div>
						<div class="wrap-foodList-foodInfo-star">
							<div class="wrap-foodList-foodInfo-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<span>4.9</span>
								<span>月售345单</span>
							</div>
							<div class="wrap-foodList-foodInfo-star-right">
								蜂窝专送
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-diliver">
							<div class="wrap-foodList-foodInfo-diliver-left">
								¥15起送 | ¥3配送
							</div>
							<div class="wrap-foodList-foodInfo-diliver-right">
								3.22km | 30分钟
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</li>
				<li>
					<div class="wrap-foodList-foodInfo-img">
						<img src="img/sj01.png" />
					</div>

					<div class="wrap-foodList-foodInfo">
						<div class="wrap-foodList-foodInfo-head">
							<p>万家饺子（软件园店）</p>
							<i class="fa fa-mobile"></i>
						</div>
						<div class="wrap-foodList-foodInfo-star">
							<div class="wrap-foodList-foodInfo-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<span>4.9</span>
								<span>月售345单</span>
							</div>
							<div class="wrap-foodList-foodInfo-star-right">
								蜂窝专送
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-diliver">
							<div class="wrap-foodList-foodInfo-diliver-left">
								¥15起送 | ¥3配送
							</div>
							<div class="wrap-foodList-foodInfo-diliver-right">
								3.22km | 30分钟
							</div>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>新</div>
							<p>饿了么新用户首单立减9元</p>
						</div>
						<div class="wrap-foodList-foodInfo-action">
							<div>特</div>
							<p>特价商品5元起</p>
						</div>
					</div>
				</li>
			</ul>
			<div class="wrap-innerFoot"></div>
			<ul class="wrap-foot">
				<li>
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-search"></i>
					<p>发现</p>
				</li>
				<li>
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user"></i>
					<p>我的</p>
				</li>
			</ul>
		</div>
	</body>
</html>
<script>
	var v = new Vue({

		el: '#app',
		/*把table的id选进来，对象的名字叫app*/
		data: {
			info: 1
		},
		mounted() { //钩子方法，ajax的fun方法转移过来
			axios.get('http://localhost:8458/Elm_DongRuanProJect_WebProject/IndexController') //异步请求
				.then(function(response) {
					v.info = response.data; //后端返回的json串儿，赋值到vue,改变前端
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		methods:{
			gotoList(id)
			{
				window.location.href='businessList.html?id='+id;//点一下就蹦过去
			}
		}
	});
</script>
